<template>
  <div class="orderList">
    <div class="orderList_top">
      <van-search show-action class="search-input" placeholder="请输入优惠券名称">
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="orderList_content">
      <van-tabs v-model:active="active" swipeable @change="tabsChange">
        <van-tab v-for="tab in tabsData" :title="tab">
          <div class="coupons-card">
            <div class="card-price">
              <div style="font-size: 40px; font-weight: 700;color: #444444;position: relative;">
                <span style="position: absolute;left: -6px;bottom: 8px; font-size: 14px;">￥</span>
                10
              </div>
              <div style="font-size: 14px;">
                无金额门槛
              </div>
            </div>
            <div class="card-content">
              <div class="coupons">商品优惠券</div>
              <div class="card-title">
                纯露化妆水无门槛10元券
              </div>
              <div class="card-time">
                有效期: 2025-03-01至2025-04-01
              </div>
              <div class="card-time">
                核销日期: 2025-04-01 15:20:11
              </div>
              <div class="card-btn">
                <div class="use-btn">立即使用</div>
              </div>
            </div>
          </div>
          <div class="coupons-card" style="background-color: #fdf2eb;">
            <div class="card-price">
              <div style="font-size: 40px; font-weight: 700;color: #444444;position: relative;">
                <span style="position: absolute;left: -6px;bottom: 8px; font-size: 14px;">￥</span>
                10
              </div>
              <div style="font-size: 14px;">
                无金额门槛
              </div>
            </div>
            <div class="card-content">
              <div class="coupons">商品优惠券</div>
              <div class="card-title">
                纯露化妆水无门槛10元券
              </div>
              <div class="card-time">
                有效期: 2025-03-01至2025-04-01
              </div>
              <div class="card-time">
                核销日期: 2025-04-01 15:20:11
              </div>
              <div class="card-btn" style="height: 10px;">
                <div style="position: absolute;top: 60%; transform: translateY(-50%);z-index: 0;">
                  <img src="../../assets/coupons/useIcon.png" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="coupons-card">
            <div class="card-price">
              <img src="../../assets/coupons/coupons.png" alt="">
            </div>
            <div class="card-content">
              <div class="coupons" style="background-color: #f29a62;">核销优惠券</div>
              <div class="card-title">
                纯露化妆水无门槛10元券
              </div>
              <div class="card-time">
                有效期: 2025-03-01至2025-04-01
              </div>
              <div class="card-time">
                核销日期: 2025-04-01 15:20:11
              </div>
              <div class="card-btn">
                <div class="use-btn" style="background-color: #f29a62;">已核销</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div style="height: 20px;"></div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

const active = ref(Number(route.query.status) || 0)
const tabsData = ref(['全部', '商品优惠券', '核销优惠券'])
function tabsChange(name, title) {
  console.log('tabs切换', name, title);
}


</script>

<style lang="scss" scoped>
.orderList {
  display: flex;
  flex-direction: column;

  .orderList_top {
    position: relative;
    height: 54px;
  }

  .orderList_content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 启用惯性滚动 */
    margin: 0 10px;
    background: transparent !important;
  }
}

.coupons-card {
  font-size: 16px;
  margin: 10px 15px;
  background-color: #faebeb;
  padding: 20px 10px 10px;
  border-radius: 10px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  // justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 9;

  .card-price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: -10px;
  }

  .card-content {
    flex: 1;

    .coupons {
      background-color: #e82050;
      color: #fff;
      padding: 0 5px;
      border-radius: 3px;
      flex-grow: 0;
      width: 80px;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #444;
    }

    .card-time {
      color: #666;
      line-height: 1.5;
      font-size: 12px;
    }

    .card-btn {
      display: flex;
      justify-content: flex-end;

      .use-btn {
        background-color: #e82050;
        color: #fff;
        padding: 3px 10px;
        font-size: 14px;
        border-radius: 100px;
      }
    }
  }
}

:deep(.van-search) {
  background: transparent;
  margin: 0 15px;
  padding: 10px 0;
}

:deep(.van-search__content) {
  border-radius: 100px !important;
  background-color: #fff;
  border: 1px solid #d0cdc9;
}

:deep(.van-search__action) {
  position: absolute;
  right: 25px;
  color: #3fccdf;
}

:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tab--active) {
  color: #3fccdf !important;
}

:deep(.van-tabs__line) {
  background: #3fccdf;
}
</style>